<template>
  <div ref="chart"></div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import { get_sourseNumber } from '../../../../api/api';

const props = defineProps({
  selectedStudentId: {
    type: Number,
    required: false,
    default: 1,
  },
});

// 监听 selectedStudentId 的变化并调用 fetchData
watch(() => props.selectedStudentId, (newValue) => {
  if (newValue) {
    fetchData(newValue); // 传递 newValue 到 fetchData
  }
});

// 获取 token
const getToken = () => {
  return localStorage.getItem('pz_token');
};

// 请求数据并更新状态
const fetchData = async (StudentID) => {
  try {
    const token = getToken();

    if (!token) {
      console.error('未找到 Token');
      return;
    }

    if (!StudentID) {
      console.error('无效的 StudentID:', StudentID);
      return;
    }

    // 设置请求头
    const headers = {
      'Authorization': `JWT ${token}`, // 将 token 作为 Bearer Token 传递
    };

    const response = await get_sourseNumber(StudentID, headers);

    const sourseNumberData = response.data.data.data; // 这里获取实际的返回数据

    // console.log('sourseNumberData:', sourseNumberData);  // 打印 classData 的结构

    // 从 sourseNumberData 中提取学年和门数数据
    const academicYears = sourseNumberData.map(item => "第" + item.AcademicYear + "学期");
    const counts = sourseNumberData.map(item => item.count);

    // 更新 ECharts 的配置
    option.xAxis[0].data = academicYears;
    option.series[0].data = counts;

    const myChart = echarts.init(chart.value)
    myChart.setOption(option)
    window.addEventListener('resize', () => {
      myChart.resize()
    })
  } catch (error) {
    console.error('获取数据失败:', error);
  }
};

const chart = ref();
// 配置 ECharts 的选项

const option = reactive({
  color: ["#2f89cf"],
  tooltip: {
    trigger: "axis",
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  // 修改图表的大小
  grid: {
    left: "0%",
    top: "10px",
    right: "0%",
    bottom: "4%",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      data:
        [
          "大一上",
          "大一下",
          "大二上",
          "大二下",
          "大三上",
          "大三下",
        ],
      axisTick: {
        alignWithLabel: true
      },
      // 修改刻度标签 相关样式
      axisLabel: {
        color: "rgba(255,255,255,.6) ",
        fontSize: 11
      },
      // 不显示x坐标轴的样式
      axisLine: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      // 修改刻度标签 相关样式
      axisLabel: {
        color: "rgba(255,255,255,.6) ",
        fontSize: 15
      },
      // y轴的线条改为了 2像素
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
          width: 2
        }
      },
      // y轴分割线的颜色
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      }
    }
  ],
  series: [
    {
      name: "本学期课程门数",
      type: "bar",
      barWidth: "35%",
      data: [0, 0, 0, 0, 0, 0],
      itemStyle: {
        // 修改柱子圆角
        borderRadius: 5
      }
    }
  ]
});
onMounted(() => {
  const myChart = echarts.init(chart.value)
  myChart.setOption(option)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
})

</script>

<style lang="less" scoped></style>